<template>
	<div class="mine" page="mine">
		<nav-header>
			<div class="" slot="left"></div>
		</nav-header>
		<login-model></login-model>
		<div class='container'>
			<!--<div @click="addPhone">添加手机</div>-->
			<div class='user-intro' v-if="userInfo == null || userInfo.member_mobile_bind == 0">
				<div class='user-intro-container'>
					<div class='user-text-info'>
						<div class='user-name'>
						</div>
						<div class='go-edit-user' @click.stop.prevent="showWixinLogin">查看并编辑个人资料</div>
					</div>
					<div class='user-portrait'>
						<img class="user-portrait" src="../../../static/img/account.svg" />
					</div>
				</div>
			</div>
			<router-link to="/userInfo" class='user-intro' v-else>
				<div class='user-intro-container'>
					<div class='user-text-info'>
						<div class='user-name'>
							{{userInfo.member_nick_name}}
						</div>
						<div class='go-edit-user'>查看并编辑个人资料</div>
					</div>
					<div class='user-portrait'>
						<img class="user-portrait" :src="userInfo.appdata.headimgurl" />
					</div>
				</div>
			</router-link>

			<div class='item-list'>
				<div v-for="(item,index) in itemList" :key="index" open-type="navigate" class='item' :to="item.router"  @click.stop.prevent="showWixinLogin(item.router)" v-if="item.router != ''">
					<div class='item-name'>{{item.name}}</div>
					<img :src='item.img' class='item-icon' />
				</div>
				<a :key="index" open-type="navigate" class='item' v-else @click="showShareCome">
					<div class='item-name'>{{item.name}}</div>
					<img :src='item.img' class='item-icon' />
				</a>
			</div>
		</div>
		<share-come v-if="isShowShareCome" @hideShareCome="hideShareCome"></share-come>
		<tabBar-footer></tabBar-footer>

	</div>
</template>

<script>
	import header from "@/components/header/header"
	import footer from "@/components/footer/footer"
	import shareCome from "@/pages/mine/components/share-come"
	import changeName from "@/pages/user-info/components/change-name"
	import { mapGetters, mapState, mapActions } from 'vuex';
	export default {
		data() {
			return {
				weixinDetail: null,
				isShowShareCome: false,
				isOldUser: false,
				itemList: [{
					name: "我的钱包",
					img: require("../../../static/img/mypurse.svg"),
					router: "/wallet"
				}, {
					name: "我的购物车",
					img: require("../../../static/img/mycart.svg"),
					router: "/shoppingCart"
				}, {
					name: "我的礼券",
					img: require("../../../static/img/mygift.svg"),
					router: "/"
				}, {
					name: "地址管理",
					img: require("../../../static/img/mylocation.svg"),
					router: "/address/test"
				}, {
					name: "关于yami",
					img: require("../../../static/img/myimformation.svg"),
					router: "/"
				}, {
					name: "邀请好友",
					img: require("../../../static/img/invitation.svg"),
					router: ""
				}],
			}
		},
		computed: {
			...mapGetters(['login']),
			...mapState(['userInfo','isLoad'])
		},
		mounted() {
		},
		methods: {
			addPhone() {
				var s = auths[0];
				if(!s.authResult) {
					alert("未登录授权！");
				} else {
					s.addPhoneNumber(function(e) {
						console.log(JSON.stringify(e))
						alert("添加用户手机号信息成功！");
					}, function(e) {
						alert("添加用户手机号信息失败：" + e.message + " - " + e.code);
					});
				}
			},
			showShareCome() {
				this.isShowShareCome = true;
			},
			hideShareCome(val) {
				this.isShowShareCome = false;
			},
			showWixinLogin(router) {
				this.$store.state.isLoad = "weixinLogin";
				if(this.userInfo && this.userInfo.member_mobile_bind == 0){
					this.$store.state.isLoad = "phoneLogin";
				}
				if(router && this.$store.state.isLoad  == "loaded"){
					this.$router.push(router)
				}
			}
		},
		components: {
			"nav-header": header,
			"tabBar-footer": footer,
			"share-come": shareCome
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
	.mine {
		width: 100%;
		overflow: hidden;
		margin: 90px 0 100px;
		.user-intro {
			display: block;
			text-decoration: none;
			padding: 12px 40px;
			.user-intro-container {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 36px;
				.user-text-info {
					width: 70%;
					.user-name {
						line-height: 82px;
						font-size: 60px;
						color: #4A4A4A;
					}
					.go-edit-user {
						color: #67666b;
						font-size: 32px;
					}
				}
				.user-portrait {
					display: block;
					overflow: hidden;
					width: 128px;
					height: 128px;
					border-radius: 50%;
				}
			}
		}
		.item-list {
			padding: 0 40px;
			.item {
				color: #4A4A4A;
				text-decoration: none;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 140px;
				border-bottom: 1px solid #dcdcdc;
				.item-name {
					font-size: 36px;
					color: #4A4A4A;
					letter-spacing: -0.43px;
				}
				.item-icon {
					width: 60px;
					height: 60px;
				}
			}
		}
	}
</style>